﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src= "http://localhost:8000/nowjs/now.js"></script>
    <script type='text/javascript' src= "knockout-2.0.0.js"></script>

    <script type="text/javascript">

//        var chatRoom = {
//            username: ko.observable(""),
//            message: ko.observable(""),
//            sendMessage: ko.observable("")
//        };
//        
//        
//        
//        $(document).ready(function () {
//         ko.applyBindings(chatRoom);
//         });

//     now.name = chatRoom.username
//     now.distributeMessage = chatRoom.message
//     now.receiveMessage
//        
        $(document).ready(function () {
        now.name = prompt("What´s your name?", "");

        
		now.receiveMessage = function (name, msg) {
			$("<div></div>").text(name + ": " + msg).appendTo("#msg");
           
        };
					
		$("#send-button").click(function () {
        now.distributeMessage($("#text-input").val());
        $("#text-input").val("");
        });	
});
    </script>
    
</head>
<body>

    <div id="msg">
        <input type="text" id="text-input" />
        <input type="button" value="Send" id="send-button"/>    
    
    </div>

    <!--<p><strong data-bind="text: username"></strong></p>
    <p>Username: <input data-bind="value: username"/></p>
    <p>Send Message<input type="text" data-bind="value: sendMessage"/></p>

    <p><strong data-bind="text: username"></strong><strong data-bind="text: text"></strong></p>-->

</body>
</html>
